Sigma Web Development

📒 Notes for Lecture 10: Video, Audio & SVG/Media Demo

• Video Tag Attributes (<video>):
  • src="Assests/video.mp4" – source of the video file.
  • controls – adds play/pause/volume controls.
  • autoplay – starts playing immediately on page load (often used with muted).
  • loop – plays the video repeatedly in a loop.
  • muted – mutes the audio track.
  • poster="Assests/image.jpg" – displays an image frame before playback.
• Audio Tag Attributes (<audio>):
  • src="Assests/audio.mp3" – source of the audio file.
  • controls – adds play/pause/volume controls to the audio.
  • autoplay – plays audio automatically on page load (often used with muted).
  • muted – starts audio muted.
  • preload options:
    • preload="none" – browser doesn’t load until “Play”.
    • preload="metadata" – browser loads only metadata (duration, size).
    • preload="auto" – browser loads entire file immediately.
  • controlsList="nodownload" – hides the download button in supported browsers.
• CSS Styling (style.css):
  • .same { border: 5px solid black; } – common border for each video/audio block.
  • #video { border: 3px solid blue; background-color: antiquewhite; margin-bottom: 50px; }
  • #audio { border: 3px solid orangered; background-color: bisque; margin-bottom: 50px; }
  • .headline { background-color: skyblue; color: red; }
  • .subheadline { background-color: aquamarine; color: purple; }
• SVG & Iframe Demo (svg.html):
  • Embeds an inline SVG circle:

  <svg height="100" width="100">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
  </svg>

  • Displays the same SVG via an <img src="img.svg"> tag.
  • Includes two iframes:
    • Portfolio embed: src="https://prashant-saini-22.vercel.app/"
    • YouTube embed: Example video player in a 560×315 iframe.
• Quiz Folder (quiz/index.html):
  • Contains multiple embedded YouTube iframes (e.g., Code With Harry, Dhruv Rathi, I Tech World videos).
  • All iframes have width="246" height="150" and autoplay/clipboard-write attributes.